<template>
	<view class="box_1">
		<view>
		<view class="container">	
			<view style="height: 100%;">
				<view class="top">
					<uni-icons type="back" size="20" style="margin-right: 210rpx;margin-left: 44rpx;" @click="getToTabbar"></uni-icons>
					<text>体重记录</text>
				</view>
				<view class="bottom">
					<view class="bottom_1">
						<view>
							<text class="text_1">脂肪</text>
						</view>
						<view style="margin-top: 20rpx;">
							<text class="text_1">{{userInfo.memberUserBodyFat}}%</text>
						</view>
					</view>
					<view class="bottom_2">
						<view class="bottom_2_view">
							<view  style="height: 100%;width: 33%;float: left;padding-top: 60rpx;box-sizing: border-box;">
								<text class="text_1" style="font-size: 85rpx;">{{userInfo.memberUserWeight}}</text>
							</view>
							<view style="float: left;width: 67%;height: 52rpx;margin-top:34rpx;text-align: left">
								<text class="text_1">公斤</text>
							</view>
						</view>
						
					</view>
					<view class="bottom_1" >
						<view>
							<text class="text_1">脂肪</text>
						</view>
						<view style="margin-top: 20rpx;">
							<text class="text_1">{{userInfo.memberUserBodyFat}}%</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="weightchange" style="overflow: scroll;">
			<view class="weightchange_1" v-for="(item, index) in selectUserWeightChangeTableList" >
				<text style="line-height: 60rpx;padding-left: 5px;">{{item.monthAndDayTime}}</text>
				<view style="width: 100%;height:152rpx;border-radius: 6px;box-shadow: 0px 2px 10px #dfdfdf;background-color: white;">
					<view class="weightchange_left">
						<text>体重</text>
						<text style="color:#B7C2FD;border:1px solid #B7C2FD;font-size: 20rpx;margin-left: 10rpx;">训练前</text>
					</view>
					<view class="weightchange_auto">
						<text>体重变化</text>
					</view>
					<view class="weightchange_right">
						<text>体重</text>
						<text style="color:#B7C2FD;border:1px solid #B7C2FD;font-size: 20rpx;margin-left: 10rpx;">训练后</text>
					</view>
					<view class="weightchange_left">
						{{item.lastWeight}}公斤
					</view>
					<view class="weightchange_auto">
						{{ item.chronicleWeight - item.lastWeight > 0 ? '+' : '' }}
						  {{ item.chronicleWeight - item.lastWeight }}公斤
					</view>
					<view class="weightchange_right">
						{{item.chronicleWeight}}公斤
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				selectUserWeightChangeTableList:[]
			}
		},
		created(){
			this.userInfo = uni.getStorageSync('userInfo')
			this.selectUserWeightChangeTable()
		},
		methods: {
			// 查询体重记录信息
			selectUserWeightChangeTable(){
					uni.request({
					    url: 'http://127.0.0.1:17000/WeightChangeTable/selectUserWeightChangeTable',
					    method: "GET",
					    data: {
							uid: uni.getStorageSync('userInfo').id,
						},
					    success: (res) => {
							console.log(res.data.data.data)
							this.selectUserWeightChangeTableList = res.data.data.data
						}
						})
			},
			//返回训练页面
			getToTabbar(){
				uni.switchTab({
					url:"/pages/student/index/training"
				})
			}
		}
	}
</script>

<style>
	.box_1{
		height: 100vh;
		background-color: #F5F5F5;
		/* background-color: #EBECED; */
	}
/* 设置背景图片 */
	.container {
		overflow: auto;
	  height: 30%;
	  background: linear-gradient(223.47deg, rgba(146, 163, 253, 1) 0%, rgba(157, 206, 255, 1) 100%);
	  /* background: blue; */
	  /* background-image: url("https://img.js.design/assets/img/625aea28bd06c1a5e27ed094.png"); */
	  /* background-size: cover; */
	}
	.top{
		height: 150rpx;
		box-sizing: border-box;
	}
	.top text{
		line-height: 245rpx;width:750rpx;font-size: 36rpx;font-weight: 500
	}
	.box_1 .container .bottom{
		height: 235rpx;
		overflow: auto;
		box-sizing: border-box;
	}
	.box_1 .container .bottom .bottom_1{
		padding-left: 30rpx;
		text-align: left;
		height: 100%;
		width: 27%;
		float: left;
		color: white;
		padding-top: 70rpx;
		box-sizing: border-box;
	}
	.box_1 .container .bottom .bottom_2{
		text-align: center;
		height: 100%;
		width: 46%;
		float: left;
		color: white;
		box-sizing: border-box;
		padding-top:34rpx
		
	}
	.box_1 .container .bottom .bottom_1 .text_1{
		font-size: 40rpx;
	}
	.box_1 .container .bottom .bottom_2 .bottom_2_view {  
	
	    width: 100%;  
	
	    height: 100%;  
	
	    padding-left: 60rpx;  
	
	
	}  
	
	.box_1 .container .bottom .bottom_2 .text_1 {  
	
	    font-size: 40rpx;  
	
	}
	.weightchange{
		width: 100%;
		height: 1100rpx;
		overflow: scroll;
	}
	.weightchange .weightchange_1{
		margin:10rpx 0rpx auto;
		margin-top:10rpx;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
		box-sizing: border-box;
		width:95%;
		height: 220rpx;
		
	}
	.weightchange .weightchange_1 .weightchange_left{
		line-height: 76rpx;
		height: 50%;
		box-sizing: border-box;
		padding-left: 40rpx;
		width:33%;
		float: left;
	}
	.weightchange .weightchange_1 .weightchange_auto{
		line-height: 76rpx;
		height: 50%;
		box-sizing: border-box;
		text-align: center;
		width:33%;
		float: left;
	}
	.weightchange .weightchange_1 .weightchange_right{
		line-height: 76rpx;
		height: 50%;
		box-sizing: border-box;
		text-align: left;
		padding-left: 76rpx;
		width:33%;
		float: left;
	}
</style>
